<template>
    <div class="red" v-show="visible"></div>
    <div class="green" v-if="visible"></div>
    <div v-if="mark >= 90">优秀</div>
    <div v-else-if="mark >= 60">及格</div>
    <div v-else>差</div>
</template>

<script setup>
    import { ref } from 'vue'
    const visible = ref(true)
    const mark = ref(100)
</script>

<style scoped>
    .red, .green{
        width:200px;
        height:200px;
    }
    .red{
        background-color:red;
    }
    .green{
        background-color:green;
    }
</style>